<!doctype html>
<html>
<head>
	<title>jQuery googleslides</title>
	
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style type="text/css">
        body { margin: 30px 10px;} 
        h2 { margin-top:8px; margin-bottom:5px; } 
        form.inline { display: inline; }
        .btn { margin-right:15px;}
        #license, #history { display:inline-block; width:49%;}
        #history { text-align: right;}
    </style>
    
    <!--start jquery.googleslides-->
    <link href="src/jquery.googleslides.css" rel="stylesheet" type="text/css" />
    <script src="src/jquery.googleslides.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#demo1").googleslides({ userid: '115528839112598673902', albumid: '5710317752556741025'});
        $("#demo2").googleslides({ userid: '115528839112598673902', albumid: '5710326335933432353',
         time: 2000,
         imgmax: 260					
     });
        $("#demo3").googleslides({ userid: '115528839112598673902', albumid: '5710326910876169537',
         imgmax: 100,
         fadespeed: 500,
         time: 8000,
         caption: false
     });
    });
    </script>
    <!--end-->
</head>
<body>
	<a href="https://github.com/bradyholt/jquery-googleslides"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
    <div class="container">
      <div class="row">
          <div class="span12">
           <h1>
            jQuery googleslides</h1>
            <p class="lead">
                A jQuery plugin to display your Google Photos.</p>
            </div>
        </div>
         <a class="btn btn-success btn-large" href="https://github.com/bradyholt/jquery-googleslides/archive/master.zip"><i class="icon-download icon-white"></i>&nbsp;Download Now</a>
            <a class="btn btn-large" href="https://github.com/bradyholt/jquery-googleslides"><i class="icon-github"></i>&nbsp;Browse Source</a>
           <form class="inline" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" >
            <input type="hidden" name="cmd" value="_donations">
            <input type="hidden" name="business" value="brady.holt@gmail.com">
            <input type="hidden" name="lc" value="US">
            <input type="hidden" name="item_name" value="Brady Holt">
            <input type="hidden" name="item_number" value="jQuery googleslides">
            <input type="hidden" name="no_note" value="0">
            <input type="hidden" name="currency_code" value="USD">
            <input type="hidden" name="bn" value="PP-DonationsBF:btn_donate_LG.gif:NonHostedGuest">
            <button class="btn btn-warning btn-large" type="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <i class="icon-money icon-large"></i>&nbsp;Donate
            </button>
            </form>

        <h2>
            Demos</h2>
            <ul id="demoTabs" class="nav nav-tabs">
                <li class="active"><a href="#demo1-tab" data-toggle="tab">Demo 1</a></li>
                <li><a href="#demo2-tab" data-toggle="tab">Demo 2</a></li>
                <li><a href="#demo3-tab" data-toggle="tab">Demo 3</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="demo1-tab">
                    <div class="row">
                        <div class="span6">
                            <div id="demo1">
                            </div>
                        </div>
                        <div class="span6">
                         <h3>Usage:</h3>
 <pre>
$("#demo1").googleslides({
   userid:'115528839112598673902', 
   albumid:'5710317752556741025'
});
</pre>
                  </div>
              </div>
          </div>
          <div class="tab-pane" id="demo2-tab">
            <div class="row">
                <div class="span6">
                    <div id="demo2">
                    </div>
                </div>
                <div class="span6">
                 <h3>Usage:</h3>
 <pre>$("#demo2").googleslides( { 
  userid:'115528839112598673902', 
  albumid:'5710326335933432353', 
  time:2000, 
  imgmax:260
});</pre>
          </div>
      </div>
  </div>
  <div class="tab-pane" id="demo3-tab">
    <div class="row">
        <div class="span6">
            <div id="demo3">
            </div>
        </div>
        <div class="span6">
         <h3>Usage:</h3>
 <pre>$("#demo3").googleslides({
  userid:'115528839112598673902', 
  albumid:'5710326910876169537',
  imgmax:100,
  fadespeed:500,
  time:8000,
  caption:false
});</pre>
  </div>
</div>
</div>
</div>
<h2>
    Setup</h2>
    <ol>
        <li>Add a reference to <strong>jquery.googleslides.css</strong> and <strong>jquery.googleslides.js</strong>:
<pre>
&lt;link href="src/jquery.googleslides.css" rel="stylesheet" type="text/css" /&gt; 
&lt;script src="src/jquery.googleslides.js" type="text/javascript"&gt;&lt;/script&gt;
</pre>
        </li>
        <li>Add a container div <strong>&lt;div id='slides'&gt;&lt;/div&gt;</strong> element to your body.</li>
        <li>Start the slides:
<pre>
$('#slides').googleslides({userid:'115528839112598673902', albumid:'5710317752556741025'});
</pre>
    </li>
        </ol>
        <h2>Finding your userid and albumid</h2>
        <p>To find your user and albumid, you should open the album directly from the Google+ or Picasa page.  When the album comes up you will see the user and
           albumid in Url.  <strong>Any album you want to display with this plugin must be marked for 'Public' sharing from Google.</strong>
           <div><img alt="" src="" /></div>
           <h2>
            Options</h2>
            <table class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>
                            Property
                        </th>
                        <th>
                            Default
                        </th>
                        <th>
                            Description
                        </th>
                    </tr>
                </thead>
                <tr>
                    <td>userid</td>
                    <td>'115528839112598673902'</td> 
                    <td>The Google user ID</td>
                </tr>
                <tr>
                    <td>albumid</td>
                    <td>'5710317752556741025'</td> 
                    <td>The Google album ID.  <strong>This album should be set to 'Public' visibility.</strong>  'Limited' visibility is supported only if an <strong>authkey</strong> option value is specified.</td>
                </tr>
                <tr>
                    <td>imgmax</td>
                    <td>460</td> 
                    <td>Max size, in pixels, of the photos.  (Note: A value of 100 will produce square sized thumbnails.)</td>
                </tr>
                <tr>
                    <td>maxresults</td>
                    <td>100</td> 
                    <td>Max number of photos to show from the album.</td>
                </tr>
                <tr>
                    <td>random</td>
                    <td>true</td> 
                    <td>Randomize the order the photos are displayed in.</td>
                </tr>
                <tr>
                    <td>caption</td>
                    <td>true</td> 
                    <td>Show the photo caption, if available.</td>
                </tr>
                <tr>
                    <td>albumlink</td>
                    <td>true</td> 
                    <td>Link the photos to the Google album page.</td>
                </tr>
                <tr>
                    <td>time</td>
                    <td>5000</td> 
                    <td>Time to show each photo before advancing (in milliseconds).</td>
                </tr>
                <tr>
                    <td>fadespeed</td>
                    <td>1000</td> 
                    <td>Fade in/out speed (in milliseconds).</td>
                </tr>
                <tr>
                    <td>authkey</td>
                    <td></td> 
                    <td>If albumid is shared with 'Limited' visibility, you must provide your album <a href="http://support.google.com/picasa/bin/answer.py?hl=en&answer=48446" target="_blank">authkey</a>.</td>
                </tr>
            </table>
          <h2>WordPress Plugin</h2>
          There is a WordPress plugin available for jQuery googleslides.  <a href="http://wordpress.org/extend/plugins/jquery-googleslides/">View the plugin page.</a>
           <hr/>
            <p id="license">Licensed under The <a target="_blank" href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>
                </p>
            <a id="history" href="https://github.com/bradyholt/jquery-googleslides/releases/">Release History</a>
           
              
              
                <script src="http://bradyholt.github.com/jquery-googleslides/assets/js/bootstrap-tab.js"></script>
            </body>
            </html>
